require.config({
	paths: {
		//注意: 值里面没有后缀名
		'jquery': '/static/js/jquery-3.1.0',
		'bootstrap': '/static/bootstrap/js/bootstrap',
		'csrf': '/static/js/csrf',
		'arttemplate': '/static/js/arttemplate',
		'cytoscape': '/static/js/cytoscape-2.7.10'
	},
	shim: {
        //"underscore" : {
        //    exports : "_",
        //},
		"arttemplate": {
			exports: 'template'
		},
		"bootstrap" : {
            deps : ["jquery"]
        },
		//csrf.js依赖于jquery
        "csrf" : {
            deps : ["jquery"]
        }
    }
});

require(['jquery', 'arttemplate', 'cytoscape', 'bootstrap', 'csrf'], function($, template, cytoscape){
$(function(){

//添加事件监听
addEventListener();
//初始化cytoscape显示区域

overviewArea = cytoscape({container: $('.overview')});
overview();

function objectTypeList(){
	$.ajax({
		url:'/try/objectTypeList',
		type:'GET',
		dataType:'json',
		success: function(result){
			console.dir(result);
			var data = template('objectTypeListItem', result);
			console.log(data);
			$('.objectTypeList').html(data);
		}
	});
}
function addEventListener(){
	$('.objectType__submit').click(objectTypeAdd);
	//注意show.bs.tab与shown.bs.tab的区别.
	$('.tab-window a[data-toggle="tab"]').on('show.bs.tab', function (e) {
		//新活跃的标签页对象
		//console.dir(e.target);
		//之前活跃的标签页对象
		//console.dir(e.relatedTarget);
		targetId = e.target.id;
		if(targetId == 'objectType') objectTypeList();
	});
}
function objectTypeAdd(){
	title = $('.objectType__title').val();
	color = $('.objectType__color').val();
	desc = $('.objectType__desc').val();

	$.ajax({
		url:'/try/objectTypeAdd',
		type:'POST',
		dataType:'json',
		data:{
			'objectTypeTitle':	title,
			'objectTypeColor':	color,
			'objectTypeDesc':	desc,
		},
		success: function(result){

		}
	});
}

function objectTypeDel(){

}

function overview(){
	cyOptions = {}
	$.ajax({
		url:'/try/overview',
		type:'get',
		success: function(result){
			console.dir(result);
			cyOptions = serializeForCy(result);
			console.dir(cyOptions);
			overviewArea = cytoscape(cyOptions).on('tap', function(evt){
				console.log( 'tap' + evt.cyTarget.id() );
			});;
			console.log(overviewArea.$("node"));
			overviewArea.$("node").addClass('ovtest');
			console.log(overviewArea.$("node").style());
			console.log(overviewArea.$("node").hasClass('ovtest'));
			//overviewArea.$("node").css({"background-color": 'red'});			
		}
	});
}
/*
    function: serializeForCy
	将后端返回的节点, 关系数据序列化成cytoscape可以直接使用的格式
*/
function serializeForCy(result){
	var cyOptions = {
		// container to render in
		container: $('.overview'), 
		elements: {
			nodes: [],
			edges: []
		},
		// the stylesheet for the graph
		style: [ 
			{
				selector: 'node',
				style: {
					'background-color': '#666',
					//节点显示内容, data()是cytoscape内置的函数
					'label': 'data(title)'
				}
			},{
				selector: 'edge',
				style: {
					'width': 2,
					'line-color': '#ccc',
					'target-arrow-color': '#ccc',
					'target-arrow-shape': 'triangle',
					'content': 'data(name)'
				}
			},{
				selector: '.ovtest',
				style: {
					'line-color': '#00ff00',
					'background-color': 'green'
				}
			}
		],
		layout: {
			name: 'grid',
			rows: 1
		}
	};
	// 注意遍历对象类型属性的方法
	for (var nodeID in result.nodes){
        tmpObj = {};
		node = result.nodes[nodeID];
		tmpObj.data = {
			id: node.uuid,
			title: node.title,
			color: node.color,
			desc: node.desc,
		}
		cyOptions.elements.nodes.push(tmpObj);
	}
    for (var relationID in result.relations){
        tmpObj = {}
		relation = result.relations[relationID];
		tmpObj.data = {
			id: relation.uuid,
			name: relation.name,
			source: relation.source,
			target: relation.target,
		}
		cyOptions.elements.edges.push(tmpObj);
	}
	return cyOptions;
}

});
});

